
/*
学习目标:JSX 中使用插值表达式-三元运算符、函数调用、逻辑运算符
常用表达式
1. 基本类型的值
  1.1 字符串、数值
  1.2 undefined、null、布尔值都不显示
2. 数组和对象
  2.1 对象，不允许直接放jsx
  2.2 数组，React中数组内的元素，会被当做一个个的虚拟DOM，会渲染出来
3. 三元运算符、函数调用、逻辑运算符
*/
import React from "react";
import ReactDOM from "react-dom";
const isLoding = true
// 通过判断`if/else`控制 
const loadData = () => {
    if (isLoding) {
        return <div>数据加载中.....</div>
    } else {
        return <div>数据加载完成，此处显示加载后的数据</div>
    }
}
// 通过三元运算符控制
const h1Node = (
    <>
        {/* 函数声明 */}
        <div>函数声明:{loadData()}</div>
        <div>三元运算符:{isLoding ? '显示' : '隐藏'}</div>
        <div>逻辑运算符: {isLoding && <div>隐藏</div>}</div>
    </>
)



// 渲染元素
// ReactDOM.render(创建的React元素,真实DOM作为挂载点)
ReactDOM.render(h1Node, document.getElementById('root'))